import {
  DefaultFooter,
  getMenuData,
  getPageTitle
} from '@ant-design/pro-layout'
import { Helmet } from 'react-helmet'
import { Link } from 'umi'
import React from 'react'
import { connect } from 'dva'
import { formatMessage } from 'umi-plugin-react/locale'
import SelectLang from '@/components/SelectLang'
import logo from '../assets/logo.svg'
import styles from './UserLayout.less'
import { useEffect } from 'react'

const UserLayout = props => {
  const {
    route = {
      routes: []
    }
  } = props
  const { routes = [] } = route
  const {
    children,
    location = {
      pathname: ''
    }
  } = props
  const { breadcrumb } = getMenuData(routes)
  const title = getPageTitle({
    pathname: location.pathname,
    breadcrumb,
    formatMessage,
    ...props
  })

  useEffect(() => {
    props.dispatch({
      type: 'config/getConfigInfo'
    })
  }, [])

  return (
    <>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={title} />
      </Helmet>

      <div className={styles.container}>{children}</div>
    </>
  )
}

export default connect(({ settings, config }) => ({ ...settings, config }))(
  UserLayout
)
